<template>
	<div class="xuanzeshangpin">
    <el-dialog  title="添加商品" :visible.sync="log2" center :close-on-click-modal="false" width="1000px">
      <div class="flex" style="margin-bottom: 20px;">
        <div style="margin-right: 30px;">
          <div style="margin-bottom: 10px;">商品名称</div>
          <div><el-input v-model="search2.title" placeholder="请输入直播页名称" ></el-input></div>
        </div>
        <div style="margin-right: 30px;">
          <div style="margin-bottom: 10px;">商品编码</div>
          <div><el-input v-model="search2.fetch_code" placeholder="请输入直播页名称" ></el-input></div>
        </div>
        <div><div style="height: 29px;"></div><el-button round type="primary" @click="getlist2">检索</el-button></div>
      </div>
      <div class="flexbc" style="background: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); border-radius: 20px; padding: 20px; margin-bottom: 20px;" v-for="item in list2" :key="item.id">
        <div class="flexc" style="width: 700px;">
          <div><img src="../../../static/img/loginbg.png" style="width: 100px; height: 100px; margin-right: 20px;"></div>
          <div>
            <div style="color: rgb(2, 12, 29); font-size: 16px; font-weight: bold; margin-bottom: 10px;">{{item.title}}</div>
            <div style="color: rgb(113, 115, 117); margin-bottom: 10px;">编码：{{item.fetch_code}}</div>
            <div style="color: rgb(175, 179, 188);">创建时间：{{item.created_at}}</div>
          </div>
        </div>
        <div><el-button round type="primary" plain @click="tianjiashop(item)">添加商品 +</el-button></div>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'xuanzeshangpin',
		data() {
			return {
        log2:false,
        search2:{
          page:1,
          page_size:20,
          status:100,
          title:"",
          selling_point:"",
          order:"",
          fetch_code:""
        },
        list2:[]
			}
		},
		created() {
      this.getlist2()
		},
		mounted() {

		},
		methods: {
      chuangjian:function(){
        this.all = {
          flow_id:this.$route.query.id,
          page_id:""
        }
        this.log2 = true
      },
      tianjiashop:function(item){
        this.all = {
          flow_id:this.$route.query.id,
          page_id:item.id
        }
        axios.post('/own/fpage/make',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('添加成功');
            this.log2 = false
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //列表
      getlist2:function(){
        axios.get('/own/page/list',{params:this.search2}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list2 = response.data.data.data
            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      }
		}
	}
</script>


<style scoped >
 .t_over_text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
 }
</style>
